//
//  FlipTurnMainView.swift
//  MySwiftUIDemo
//
//  Created by wangws1990 on 2024/7/7.
//
import SwiftUI
import CoreMotion
#Preview {
    FlipTurnMainView()
}
//324,170
//0 = 5 1 2
//1 = 1 2 3
//2 = 2 3 4

struct FlipTurnMainView: View {
    //[1,2,3,4,5]
    let list = ["icon_puzz_type_sub1","icon_puzz_type_sub2","icon_puzz_type_sub3","icon_puzz_type_sub4","icon_puzz_type_sub5"]
    var isFlip: Bool{
        return abs(index) % 2 == 0
    }
    @State private var currentStep = 0
    @State var index: Int = 0
    @State var info: [String] = []
    
    var listData :[String]{
//       return ["icon_puzz_type_sub1","icon_puzz_type_sub2","icon_puzz_type_sub3","icon_puzz_type_sub4","icon_puzz_type_sub5"]
        var listDatsass: [String] = []
        let i = index % list.count
        let left = i - 1
        if left < 0{
            if let last = list.last{
                listDatsass.append(last)
            }
        }else{
            listDatsass.append(list[left])
        }
        let center = list[i]
        listDatsass.append(center)
        let right = i + 1
        if right >= list.count{
            if let first = list.first{
                listDatsass.append(first)
            }
        }else{
            listDatsass.append(list[right])
        }
        return listDatsass//.reversed()
    }
    func getx()->CGFloat{
        if index < 0{
            index = list.count * 100
        }
        var ex = 0.0
        if abs(index) % 3 == 0{
            ex =  0
        }
        if abs(index) % 3 == 1{
            ex =  1
        }
        if abs(index) % 3 == 2{
            ex = -1
        }
        return ex
    }
    var isRight: Bool{
        return getx() > 0
    }
    var isLeft: Bool{
        return getx() < 0
    }
    @State var isAdd: Bool = false
    @ViewBuilder
    func getView()->some View{
        ZStack{
            HStack(spacing: 0, content: {
                ForEach(listData.indices,id: \.self) { i in
                    let img = listData[i]
                    getContentView(img, des: i%2 == 0 ? 1 : -1)
                }
            })
        }.frame(width: 300,height: 100)
            .compositingGroup()
    }
    var body: some View {
        VStack(spacing: 0){

            Text("tag = \(getx()),index = \(index),add = \(isAdd)")
            let ex = getx()
            let showLeft = isLeft && isAdd
            let showRight = isRight && !isAdd
            let show = (showLeft || showRight)
            ZStack{
                ZStack{
                    getView()
                        .opacity(show ? 0 : 1)
                }
                .compositingGroup()
                .offset(x:CGFloat(ex*100))
                .animation(show ? .none : .linear(duration: 0.4), value: isFlip)
                .compositingGroup()
                //用于过度

                getView()
                .opacity(showLeft ? 1 : 0)
                .compositingGroup()
                .offset(x: !isLeft ? 100 : 200)
                .animation(isLeft ?  .linear(duration: 0.4).delay(0) : .none, value: isLeft)
                .compositingGroup()
                .zIndex(showLeft ? 1 : 0)
                
                getView()
                .opacity(showRight ? 1 : 0)
                .compositingGroup()
                .offset(x: isRight ? -200 : -100)
                .animation(isRight ? .linear(duration: 0.4).delay(0) : .none, value: isRight)
                .compositingGroup()
                .zIndex(showLeft ? 1 : 0)
                //右边到左边
                ZStack{
                    getView()
                    .opacity(ex != 0 && !isAdd ? 1 : 0)
                }
                .compositingGroup()
                .offset(x: isRight ? ex*100  : (-ex*100 + 100) )
                .animation(isRight ? .linear(duration: 0.4) : .easeOut(duration: 0.001), value: isRight)
                .compositingGroup()
                
                // 左边道右边
                ZStack{
                    getView()
                    .opacity(ex != 0 && isAdd ? 1 : 0)
                }
                .compositingGroup()
                .offset(x: isLeft ? ex*100  : ( -ex*100 - 100) )
                .animation(isLeft ? .linear(duration: 0.4) : .easeOut(duration: 0.001), value: isLeft)
                .compositingGroup()
            }.compositingGroup()
         //   .frame(width: 100,height: 120).clipped()

            
            
            HStack{
                Text("left").padding().foregroundColor(.red).font(.title)
                    .onTapGesture {
                        isAdd = true
                        index = index + 1
                        debugPrint("add = isadd",isAdd,getx())
                    }
    
                Text("right").padding().foregroundColor(.red).font(.title)
                    .onTapGesture {
                        isAdd = false
                        index = index - 1
                        debugPrint("res = isadd",isAdd,getx())//不能删 要执行getx
                    }
 
            }
            
        }

    }
    @ViewBuilder
    func getContentView(_ img: String,des: Int)->some View{
        ZStack{
            Image(img).resizable().scaledToFill()
                .frame(width: 100,height: 100).cornerRadius(10, antialiased: true)
               .rotationEffect(.degrees(Double(des*3)))
        }
    }

}
 
   

